<template>
  <span v-if="invisible"></span>

  <!-- <div v-else-if="widget === 'label_selection'">
    {{ value_readonly }}
  </div> -->

  <!-- <div v-else-if="widget === 'state_selection'">
    {{ value_readonly }}
  </div> -->

  <!-- <WRadio
    v-else-if="widget === 'radio'"
    :value_readonly="value_readonly"
    :value_edit="value_edit"
    :selectionOptions="field.selection"
    :editable="editable"
    :data-info="dataInfo"
    :view-info="{ ...viewInfo, node }"
    @on-change="onchange"
  /> -->

  <!-- <div v-else-if="widget === 'priority'">
    todo:
    <div>selection priority</div>
    {{ [field.type, fname, widget] }}
    <WPriority
      :value_readonly="value_readonly"
      :value_edit="value_edit"
      :selectionOptions="field.selection"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="{ ...viewInfo, node }"
      @on-change="onchange"
      @on-event="handleOnEvent"
    />
  </div> -->

  <!-- <div
    v-else-if="!widget || ['timezone_mismatch', 'selection'].includes(widget)"
  >
    付款单 partner_type todo:
    <div>selection selection</div>
    

    {{ [field.type, fname, widget] }}

    <WSelection
      :value_readonly="value_readonly"
      :value_edit="value"
      :selectionOptions="field.selection"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="{ ...viewInfo, node }"
      @on-change="onchange"
    />
  </div> -->

  <div v-else-if="widget_todo">
    todo:{{ [field.type, fname, widget] }}

    {{ value_readonly }}
  </div>

  <div v-else-if="type === 'cell'">
    <van-form ref="refForm">
      <template v-if="readonly || !editable">
        <van-field readonly :value="value_readonly">
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
        </van-field>
      </template>

      <template v-else>
        <van-field
          readonly
          clickable
          :value="(value_with_label || [null, ''])[1]"
          :name="fname"
          placeholder="请选择"
          @click="onClickCellEdit"
        >
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
        </van-field>

        <van-popup v-model="showPicker" position="bottom">
          <!-- {{ field.selection }} -->

          <van-picker
            ref="refPicker"
            show-toolbar
            :default-index="
              field.selection.findIndex(
                item => item[0] === (value_with_label || [null, ''])[0]
              )
            "
            :columns="
              field.selection.map(item => {
                return { value: item[0], label: item[1] }
              })
            "
            @confirm="handleConfirm"
            @cancel="showPicker = false"
          >
            <template #option="item"> {{ item.label }} </template>
            <!-- <template #columns-top>
              <van-button @click="onClickSetNull">置空</van-button>
            </template> -->
          </van-picker>
        </van-popup>
      </template>
    </van-form>
  </div>

  <div v-else>
    todo else:{{ [field.type, fname, widget] }}
    <!-- never go here -->
  </div>
</template>

<script>
import OFMixin from './OFMixin'
import OLabel from '../OLabel.vue'

// import WRadio from './WRadio.vue'
// import WPriority from './WPriority.vue'
// import WSelection from './WSelection.vue'

export default {
  name: 'FSelection',
  components: {
    OLabel
    //  WRadio, WPriority, WSelection
  },
  mixins: [OFMixin],
  props: {},

  data() {
    return {
      showPicker: false
    }
  },
  computed: {
    value_readonly() {
      const op = this.field.selection.find(
        item => item[0] === this.record[this.fname]
      )
      return op ? op[1] : ''
    },

    widget_todo() {
      const done = []
      return done.includes(this.widget) ? '' : this.widget
    },

    value_with_label() {
      if (this.fname in this.values) {
        const val = this.values[this.fname]

        return this.field.selection.find(item => item[0] === val)
        // return val || undefined
      } else {
        const val = this.record[this.fname]
        return this.field.selection.find(item => item[0] === val)
        // return val || undefined
      }
    }
  },

  watch: {},

  created() {},

  mounted() {},

  methods: {
    async onClickCellEdit() {
      console.log('onClickCellEdit')

      this.showPicker = true

      // this.load_select_options()
    },

    async handleConfirm(item, index) {
      console.log('handleConfirm', item)
      const res = await this.onchange(item.value)
      console.log('handleConfirm', res)
      this.showPicker = false
    }
  }
}
</script>

<style type="text/css"></style>
